<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示当前时间</title>
    <style>
        .currenttime {
            height: 200px;
            width: 1000px;
            color: purple;
            margin: 0px auto;
            text-align: center;
            font-size: 35px;
            background-image: url(./img/1.png);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
 
<body>
    <div class="currenttime"></div>
    <script>
        function showTime() {
            //获取currentTime
            let currentTime = document.querySelector('.currenttime');
            let time = new Date();
            //年
            let y = time.getFullYear();
            //月
            let m = time.getMonth() + 1;
            m = m >= 10 ? m : '0' + m;
            //日
            let d = time.getDate();
            d = d >= 10 ? d : '0' + d;
            //时
            let h = time.getHours();
            h = h >= 10 ? h : '0' + h;
            //分
            let mins = time.getMinutes();
            mins = mins > 10 ? mins : '0' + mins;
            //秒
            let s = time.getSeconds();
            s = s >= 10 ? s : '0' + s;
            //这个地方时字符串拼接，建议用模板字符串，更简洁
            str = '现在是北京时间：' + y + '年' + m + '月' + d + '日' + h + '时' + mins + '分' + s + '秒';
            currentTime.innerHTML = str;
            //添加一个延时定时器，每隔1s显示一次秒数的变化
            setTimeout(showTime, 1000);
        }
        window.onload = showTime();
    </script>
</body>
 
</html>